<!--<template>-->
<!--  <div class="card">-->
<!--    <input v-model="keyword" type="text" />-->
<!--    <button @click="addTodo">保存</button>-->
<!--    <ul>-->
<!--      <li v-for="item in todoList" :key="item.title">-->
<!--        <input v-model="item.done" type="checkbox" />-->
<!--        {{ item.title }}-->
<!--      </li>-->
<!--    </ul>-->
<!--    全选：<input v-model="checkall" type="checkbox" />-->
<!--  </div>-->
<!--</template>-->

<!--<script setup lang="ts">-->
<!--import { ref, computed, reactive } from 'vue';-->

<!--const keyword = ref('');-->
<!--const todoList = reactive([-->
<!--  {-->
<!--    title: '吃饭',-->
<!--    done: false,-->
<!--  },-->
<!--]);-->
<!--function addTodo() {-->
<!--  todoList.push({-->
<!--    title: keyword.value,-->
<!--    done: false,-->
<!--  });-->
<!--  keyword.value = '';-->
<!--}-->
<!--const checkall = computed({-->
<!--  get() {-->
<!--    return todoList.filter(v => v.done).length === todoList.length;-->
<!--  },-->
<!--  set(val: boolean) {-->
<!--    todoList.forEach(v => (v.done = val));-->
<!--  },-->
<!--});-->
<!--</script>-->

<template>
  <button @click="increase"> Click me </button>
  <br />
  <h3> List </h3>
  <ul>
    <li v-for="item in sortedList" :key="item">
      {{ item }}
    </li>
  </ul>
</template>

<script setup>
import { ref, reactive, computed, onUpdated } from 'vue';

const list = reactive([1, 2, 3, 4, 5]);

const count = ref(0);
function increase() {
  count.value++;
}

const isOver100 = computed(() => count.value > 10);

const sortedList = computed(() => {
  // imagine this to be expensive
  console.log('sortedList computed');
  return isOver100.value ? [...list].reverse() : [...list];
});

onUpdated(() => {
  // this eill log whenever the component re-renders
  console.log('component re-rendered!');
});

// https://dev.to/linusborg/vue-when-a-computed-property-can-be-the-wrong-tool-195j
</script>
